<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="600px"
    @close="close"
  >
    <el-descriptions :border="true" :column="2" size="medium" title="用户信息">
      <el-descriptions-item label="头像">
        <img
          alt="头像"
          :src="userInfo.avatar"
          style="width: 60px; border-radius: 30px"
        />
      </el-descriptions-item>
      <el-descriptions-item label="用户名">
        {{ userInfo.nickname }}
      </el-descriptions-item>
      <el-descriptions-item label="手机号">
        {{ userInfo.mobile }}
      </el-descriptions-item>
      <el-descriptions-item label="会员等级">
        {{ userInfo.mobile }}
      </el-descriptions-item>
      <el-descriptions-item label="余额">
        {{ userInfo.balance }}
      </el-descriptions-item>
      <el-descriptions-item label="碳币">
        {{ userInfo.carbon_coin }}
      </el-descriptions-item>
      <el-descriptions-item label="回收次数">
        {{ userInfo.recycle_num }}
      </el-descriptions-item>
      <el-descriptions-item label="回收重量">
        {{ userInfo.recycle_weight }}
      </el-descriptions-item>
      <el-descriptions-item label="openid">
        {{ userInfo.openid }}
      </el-descriptions-item>
      <el-descriptions-item label="unionid">
        {{ userInfo.unionid }}
      </el-descriptions-item>
      <el-descriptions-item label="注册时间">
        {{ userInfo.created_at }}
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script>
  export default {
    name: 'UserInfo',
    data() {
      return {
        userInfo: {},
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {},
    methods: {
      showEdit(row) {
        this.userInfo = Object.assign({}, row)
        this.dialogFormVisible = true
      },
      close() {
        this.dialogFormVisible = false
      },
    },
  }
</script>
